<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
			body,html{
				padding: 0;
				margin: 0;
				background:#0A0F23;
				width: 100%;
				height: 100%;
			}
		</style>
</head>
<body>
    <div id="vbarChart" style="width:100%;height:100%;"></div>
   	<script src="../../components/echarts-4.0.4.min.js"></script>
 	<script src="../../components/jquery-1.11.0.min.js"></script>
  <!--  <script src="../../js/components/utils.js"></script>-->
    <script>
        var vbarChart = echarts.init(document.getElementById('vbarChart'));

        var dataMap = {};

        dataMap.dataVisit = {
            //次数
            2011: [ 11, 18, 10,19,15, 2,1],
            2012: [13,  17, 35, 25,26,1,1],
            2013: [28, 30, 21, 39,32,3,4],
            2014: [15,16,41,44,45,2,1],
            2015: [23,30,35,41,34,2,1],
            2016: [17, 35, 38, 32, 21,0,1],
            2017: [23, 20, 27, 25, 27,1,3],
            //到访人数
            1: [ 148.0, 287.0, 157.0,340.0,295.0, 20.0,20.0],
            2: [186.0,234.0, 713.0, 335.0,381.0,35.0,13.0],
            3: [232.0,232.0, 190.0, 570.0,385.0,28.0,33.0],
            4: [254.0,193.0,395.0,374.0,341.0,13.0,1.0],
            5: [186.0,363.0,464.0,346.0,259.0,32.0,9.0],
            6: [367.0, 316.0, 333.0, 587.0, 224.0,0,4.0],
            7: [177.0, 192.0,249.0,331.0, 217.0,40.0,25.0]
        };

        var barOption = {
            baseOption: {
                timeline: {
                    show: false,
                    axisType: 'category',
                    loop: true,
                    autoPlay: true,
                    playInterval: 1000,
                    label: {
                        normal: {
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        position: 14
                    },
                    lineStyle: {
                        color: '#fff'
                    },
                    controlStyle: {
                        show: false
                    },
                    top: 0,
                    data: [
                       '2011','2012', '2013','2014','2015',' 2016', '2017'
                    ]
                },
                legend: {
                	left: '50px',
                	top:'15px',
		            data: ['次数', '人数'],
		            textStyle: {
			        	color: '#fff',
			        	fontSize:16
			        	
			      	},
			      	itemWidth:15,
			      	itemHeight:10
		        },
                tooltip: {
				    trigger: 'axis',
				    axisPointer: {
				      type: 'shadow',
				    }
				  },
                 grid: {
			        left: '5%',
			        right: '5%',
			        bottom: '5%',
			        top:'25%',
			        containLabel: true
			    },
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#fff',
                                fontSize:16
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        data: ['周一', '周二','周三','周四','周五', '周六', '周天'],
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: 50,
                        name:'次数',
					      nameTextStyle: {
					        "color": "#AEA4A8",
					         verticalAlign:'bottom'
					      },
                        //interval: 10,
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#fff',
                                fontSize:16
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    {
                        type: 'value',
                        max: 750,
                        min: 0,
                        name:'人数',
					    nameTextStyle: {
					        "color": "#AEA4A8",
					        verticalAlign:'bottom'
					    },
                        //interval: 150,
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#fff',
                                fontSize:16
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    }

                ],
                series: [
                    {name: '次数', type: 'bar',fontSize:16},
                    {name: '人数', type: 'line', smooth: true,fontSize:16}
                ]
            },
            options: [
                {

                    title: {
                        text: '2011年到访情况',
                        left: 'center',
                        top: '5%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series: [
                        {
                            data: dataMap.dataVisit['2011'],
                            itemStyle: {
                                normal: {
                                    color: '#336c9c'
                                }
                            },
                            barWidth :"40%",
                        },
                        {
                            yAxisIndex: 1,
                            data: dataMap.dataVisit['1'],
                            itemStyle: {
                                normal: {
                                    color: '#e8e9ab'
                                }
                            }
                        }
                    ]
                },
                {
                    title: {
                        text: '2012年到访情况',
                        left: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series: [
                        {
                            data: dataMap.dataVisit['2012'],
                            itemStyle: {
                                normal: {
                                    color: '#8ce8e7'
                                }
                            },
                            barWidth :"40%",
                        },
                        {
                            yAxisIndex: 1,
                            data: dataMap.dataVisit['2'],
                            itemStyle: {
                                normal: {
                                    color: '#e8e9ab'
                                }
                            }
                        }
                    ]
                },
                {
                    title: {
                        text: '2013年到访情况',
                        left: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series: [
                        {
                            data: dataMap.dataVisit['2013'],
                            itemStyle: {
                                normal: {
                                    color: '#00c2ff'
                                }
                            },
                            barWidth :"40%",
                        },
                        {
                            yAxisIndex: 1,
                            data: dataMap.dataVisit['3'],
                            itemStyle: {
                                normal: {
                                    color: '#66b2d9'
                                }
                            }
                        }
                    ]
                },
                {
                    title: {
                        text: '2014年到访情况',
                        left: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series : [
                        {
                            data: dataMap.dataVisit['2014'],
                            itemStyle: {
                                normal: {
                                    color: '#00a0b6'
                                }
                            },
                            barWidth :"40%",
                        },
                        {
                            yAxisIndex: 1,
                            data: dataMap.dataVisit['4'],
                            itemStyle: {
                                normal: {
                                    color: '#e8e9ab'
                                }
                            }
                        }
                    ]
                },
                {
                    title: {
                        text: '2015年到访情况',
                        left: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series : [
                        {
                            data: dataMap.dataVisit['2015'],
                            itemStyle: {
                                normal: {
                                    color: '#296950'
                                }
                            },
                        	barWidth :"40%",
                        },
                        {
                            yAxisIndex: 1,
                            data: dataMap.dataVisit['5'],
                            itemStyle: {
                                normal: {
                                    color: '#e8e9ab'
                                }
                            }
                        }
                    ]
                },
                {
                    title: {
                        text: '2016年到访情况',
                        left: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series : [
                        {
                            data: dataMap.dataVisit['2016'],
                            itemStyle: {
                                normal: {
                                    color: '#59c293'
                                }
                            },
                            barWidth :"40%",
                        },
                        {
                            yAxisIndex: 1,
                            data: dataMap.dataVisit['6'],
                            itemStyle: {
                                normal: {
                                    color: '#e8e9ab'
                                }
                            }
                        }
                    ]
                },
                {
                    title: {
                        text: '2017年到访情况',
                        left: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series : [
                        {
                            data: dataMap.dataVisit['2017'],
                            itemStyle: {
                                normal: {
                                    color: '#67c47b'
                                }
                            },
                            barWidth :"40%",
                        },
                        {
                            yAxisIndex: 1,
                            data: dataMap.dataVisit['7'],
                            itemStyle: {
                                normal: {
                                    color: '#e8e9ab'
                                }
                            }
                        }
                    ]
                }
            ]
        };

        vbarChart.setOption(barOption);
    </script>
</body>
</html>